<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox,ElLoading  } from 'element-plus';
import { exportFile } from '@/utils/common.js';
import { getCouponsFlow } from '@/api/Marketing/coupon.js'
const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
const searchData = ref({})
// 新增编辑回退时候刷新列表
onActivated(()=>{

})
const formInline = ref([
    {
      type: "input",
      prop: "couponsName",
      placeholder: "优惠券名称",
      label: "",
      model: "",
    },
    {
      type: "input",
      prop: "remark",
      placeholder: "备注名称",
      label: "",
      model: "",
    },
    {
        type: "select",
        placeholder: "变动类型",
        label: '',
        prop: 'changeType',
        data:[
            {
                label:"发放",
                value:1
            },
            {
                label:"使用",
                value:3
            },
            {
                label:"失效",
                value:2
            }
        ],
        model: "",
    },
    {
      type: "datePicker",
      prop: ["changeStartTime", "changeEndTime"],
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      label: "",
      model: [],
    },
])

const btnLefts = ref([
{
        label:"导出",
        plain:false,
        type:"primary",
        show:true,
        plain:true,
        img:new URL("@/assets/icon/btn-export.png",import.meta.url),
        style:"border-color:#0C268C;color:#0C268C",
        click:async ()=>{

          const loading = ElLoading.service({
                lock: true,
                text: '导出中',
                background: 'rgba(255, 255, 255, 0.7)',
            })
            try{

              await exportFile(`/jy-marketing/mgmt/marketing/coupons/couponsFlowExport`,'post',`优惠券流水信息`,{},searchData.value);
              loading.close()
            }catch(e){
              
              loading.close()
            }
        }
    },
])
const btnRights = ref([
])

const tableConfig = ref([

    {
      prop: "couponsName",
      label: "优惠券名称",
      width:310
    },
    {
      prop: "couponsRemark",
      label: "备注名称",
      width:200
    },
    {
      prop: "offerContent",
      label: "优惠内容",
      type:"slot",
      slotName:'offerContent',
      width:310
    },
    {
      prop: "userName",
      label: "领取人",
      width:100
    },
    {
      prop: "phone",
      label: "领取手机号",
      width:150
    },
    {
      prop: "changeType",
      label: "变动类型",
      width:100,
      format:(value)=>{
        return ["发放","发放","失效","使用"][value]
      }
    },
    {
      prop: "changeMethod",
      label: "变动方式",
      width:200
    },
    {
      prop: "changeTime",
      label: "时间",
      width:250
    },
]);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);


const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
      searchData.value = formInline;  
      let result = await getCouponsFlow(formInline);
      totalPage.value = Number(result.total);
      tableData.value = result.records;
      tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}

</script>
<template>
    <div class="page-content">
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          @handlerSearch="handlerSearch"
        >
            <template #offerContent="{ row }">
                <div class="info-show">
                    <div class="text-show" >
                        {{ row.usingThresholdText }}
                        
                    </div>
                    <el-tooltip placement="top">
                        <template #content>
                            <div class="tips-info">
                              1.优惠内容：{{ row.usingThresholdText }}；
                              2.适用门店及业务：{{ row.businessScope  == 0?'全部门店及业务':`指定门店及业务` }}；
                              3.适用范围：{{ ["全部商品可用","指定商品可用","指定商品不可用"][row.activityScope] }}
                            </div>
                        </template>
                        <img src="@/assets/images/warning-circle.png" alt="" class="img">
                    </el-tooltip>

                </div>
            </template>
        </SeachTable>
    </div>
</template>
<style lang="less" scoped>
.tips-info{
    max-width: 300px; 
}
.info-show{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .text-show{
        max-width: calc(100% - 14px);
        box-sizing:border-box;
        padding-right:4px;
        font-weight: 400;
        color: #222222;
        line-height: 18px;
        word-break: break-all;
        word-wrap: break-word;
    }
    .img{
        width: 14px;
        height: 14px;
        cursor: pointer;

    }
}
.a-link{
    color:#3480FF;
    font-size: 14px;
    cursor: pointer;
}

</style>